<template>
  <div class="backgou">
    <div class="con3">
      <div class="con4">近期最受期待</div>
      <div class="con5">
        <div class="con6">
          <div v-for="item in waitlist" :item="item" :key="item.id" class="aa">
            <div class="aa">
              <div id="photo">
                <img :src="item.img" alt="" id="photo" />
                <!-- <span id="s11">{{ item.wish }}想看</span> -->
              </div>
              <div id="s12">{{ item.nm }}</div>
              <div id="s13">{{ item.comingTitle }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="con" v-for="(value, key) in daiyingList" :key="key">
      <div id="con2">{{ key }}</div>
      <div id="innercon" v-for="item in value" :key="item.id">
        <div id="icon1"><img :src="item.img" alt="" /></div>
        <div id="icon2">
          <div>
            {{ item.nm }}<span id="version" v-if="item.version">3D</span>
          </div>
          <div>
            <span id="wish">{{ item.wish }}</span
            >人想看
          </div>
          <div>主演:{{ item.star }}</div>
          <div>{{ item.rt }}上映</div>
        </div>
        <div id="icon3">
          <div v-if="item.showst == 4" id="clk1">预售</div>
          <div v-else id="clk2">想看</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "wait",
  data() {
    return {
      waitlist: [],
      daiyingList: [],
    };
  },
  mounted() {
    //获取上部数据
    axios
      .get(
        "/ajax/mostExpected?ci=30&limit=10&offset=0&token=&optimus_uuid=C6BAECB0DA5011EB9F76D38415D50CA3E8F872EE4B1D481DBEBFFEE1E574CC12&optimus_risk_level=71&optimus_code=10"
      )
      .then((res) => {
        res.data.coming.forEach((item) => {
          item.img = item.img.replace("w.h", "64.90");
          item.comingTitle = item.comingTitle.split(" ");
          item.comingTitle = item.comingTitle[0];
        });
        this.waitlist = res.data.coming;
        // console.log(this.waitlist);
      });
    //获取下部数据
    axios
      .get(
        "/ajax/comingList?ci=30&token=&limit=10&optimus_uuid=C6BAECB0DA5011EB9F76D38415D50CA3E8F872EE4B1D481DBEBFFEE1E574CC12&optimus_risk_level=71&optimus_code=10"
      )
      .then((res) => {
        var daiyingList = res.data.coming;
        var daiying = {};
        daiyingList.forEach((item) => {
          item.img = item.img.replace("w.h", "64.90");
          if (daiying[item.comingTitle]) {
            daiying[item.comingTitle].push(item);
          } else {
            daiying[item.comingTitle] = [];
            daiying[item.comingTitle].push(item);
          }
        });
        this.daiyingList = daiying;
        console.log(this.daiyingList);
      });
  },
};
</script>
<style scoped>
.backgou {
  background: #f5f5f5;
}
#abc {
  height: 1000px;
}
.con3 {
  width: 100%;
  margin-top: 180px;
  box-sizing: border-box;
  padding: 0.32rem 0.4rem 0.32rem 0.32rem;
  background: white;
  box-sizing: border-box;
}

.con4 {
  color: #333;
  font-size: 0.373333rem;
}

.con5 {
  width: 100%;
  overflow-x: scroll;
  margin-top: 0.133333rem;
  /* padding-bottom: 10000px; */
}

.con6 {
  height: 100%;
  box-sizing: border-box;
  flex-wrap: nowrap;
  display: flex;
}

.aa {
  width: 85px;
  height: 100%;
  margin-right: 20px;
  margin-left: 0;
  margin-top: 0;
}

#photo {
  width: 85px;
  height: 115px;
  box-sizing: border-box;
}
#s11 {
  color: #faaf00;
  font-size: 0.346667rem;
  display: block;
  margin-top: -0.48rem;
  z-index: 100;
  font-weight: bold;
}

#s12 {
  width: 2.266667rem;
  color: #222;
  font-size: 0.346667rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 0.133333rem;
  font-weight: bold;
}
#s13 {
  width: 100%;
  color: #999;
  font-size: 0.32rem;
  margin-top: 0.08rem;
}
#con {
  width: 100%;
  background: #fff;
  margin-top: 0.213333rem;
  border: 0.026667rem solid #fff;
  box-sizing: border-box;
}
#con2 {
  color: #333;
  font-size: 0.373333rem;
  margin-top: 0.32rem;
  margin-left: 0.266667rem;
}
#icon1,
#icon2,
#icon3 {
  display: inline-block;
  vertical-align: middle;
  margin-top: 0.32rem;
}
#icon1 {
  margin-left: 0.266667rem;
  margin-bottom: 0.266667rem;
}
#icon2 {
  width: 250px;
  margin-left: 0.266667rem;
}
#version {
  color: white;
  background: #3c9fe6;
  font-size: 2px;
  border-radius: 0.133333rem;
  margin-left: 0.08rem;
  padding: 0.026667rem 0.053333rem 0.026667rem 0.053333rem;
}
#icon2 div {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#icon2 div:nth-of-type(1) {
  color: #333;
  font-size: 0.453333rem;
  margin-top: -0.213333rem;
}
#icon2 div:nth-of-type(2),
#icon2 div:nth-of-type(3),
#icon2 div:nth-of-type(4) {
  color: #666;
  font-size: 0.346667rem;
  margin-top: 0.133333rem;
}
#wish {
  color: #faaf00;
  font-size: 0.4rem;
  font-weight: bold;
}
#clk1,
#clk2 {
  width: 50px;
  height: 20px;
  display: inline-block;
  line-height: 20px;
  text-align: center;
  border-radius: 0.133333rem;
  color: #fff;
  font-size: 0.32rem;
}
#clk1 {
  background: #3c9fe6;
}
#clk2 {
  background: #faaf00;
}
</style>